<template>
  <div class="mainDiv">
    <Scroll height='960' :on-reach-bottom='onReachBottm'>
      <Card v-for="(tNew,index) in news" :key="index">
        <h1>{{ tNew.desc }}</h1>
        <b>{{ tNew.who }}</b>
      </Card>
    </Scroll>
    <Spin v-if="isShow"></Spin>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        news: [],
        page: 1,
        isShow: false
      }
    },
    created: function () {
      this.$Loading.start()
      this.isShow = true
      this.$http.get(`http://gank.io/api/data/iOS/15/${this.page}`).then(data => {
        this.news = data.body.results
        this.$Loading.finish()
        this.isShow = false
        this.page++
      })
    },
    methods: {
      onReachBottm: function (e) {
        this.$Loading.start()
        this.isShow = true
        this.$http.get(`http://gank.io/api/data/iOS/15/${this.page}`).then(data => {
          this.news = this.news.concat(data.body.results);
          this.$Loading.finish()
          this.isShow = false
          this.page++
        })
      }
    }
  }
</script>

